<div class="nav">
  <ul class="nav-main">
    <li style="margin-right: 10px; width: 60px">
      <a style="padding-top: 1px;">
        <img (click)="onJumpUi()" alt="" height="30px" id="left-logo" src=""/>
      </a>
    </li>
    <li *ngFor="let v of navs" [ngClass]="{'dropdown': v.children}">
      <a>{{ v.name|translate }}</a>
      <ul *ngIf="v.id === 'Tabs' " [ngClass]="{'dropdown-content': true}">
        <li *ngIf="viewListSorted.length === 0"><a>{{ 'NoTabs' | translate }}</a></li>
        <ng-container *ngIf="viewListSorted.length > 0">
          <ng-container *ngFor="let v of viewListSorted">
            <li *ngIf="v.name!=null" [ngClass]="{'disconnected':!v.connected, 'hidden': v.closed != false}">
          <span [class.active]="v.active">
            <a (click)="_viewSrv.activeView(v)" id="{{ 'tab' + v.id }}">
              <i class="fa fa-circle flag"></i> {{ v.name }} </a>
          </span>
            </li>
          </ng-container>
        </ng-container>
      </ul>
      <ul *ngIf="v.children && v.id !== 'Tabs'" [ngClass]="{'dropdown-content': v.children}">
        <li *ngFor="let vv of v.children" [ngClass]="{'disabled': vv.disable}">
          <a *ngIf="vv.href" [routerLink]="[vv.href]">{{ vv.name | translate }}</a>
          <a (click)="vv.click && vv.click()" *ngIf="vv.click && !vv.hide" id="{{vv.id}}">{{ vv.name| translate }}</a>
        </li>
      </ul>
    </li>
  </ul>
  <div class="nav-right">
    <elements-user-profile></elements-user-profile>
  </div>
</div>
